<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<style type="text/css">
			html,
			body {
				height: 100%;
			}
			.bottom {
				position absolute width 100% height 100% z-index 10
			}
		</style>

		<script type="text/javascript" src="js/charts/jquery.js"></script>
		<script type="text/javascript" src="js/charts/echarts.min.js"></script>
		<script type="text/javascript" src="js/charts/dataTool.min.js"></script>
		<script type="text/javascript" src="js/charts/china.js"></script>
		<script type="text/javascript" src="js/charts/world.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
		<script type="text/javascript" src="js/charts/bmap.min.js"></script>

	</head>

	<body>

		<div id="container" class="bottom" style="width:100%;height: 100%"></div>

		<script type="text/javascript">
			function initchart() {
				var option = null;

				function randomValue() {
					return Math.round(Math.random() * 10000);
				}
				option = {
					tooltip: {},
					visualMap: {
						min: 0,
						max: 20000,
						text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['#e0ffff', '#ffd133']
						}
					},
					geo: {
						map: 'china',
						roam: true,
						label: {
							normal: {
								show: true,
								textStyle: {
									color: 'rgba(0,0,0,0.4)'
								}
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(0, 0, 0, 0.2)'
							},
							emphasis: {
								areaColor: null,
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
								borderWidth: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					},
					series: [{
						name: '浏览量',
						type: 'map',
						roam: true,
						coordinateSystem: 'geo',
						geoIndex: 0, // tooltip: {show: false},
						label: {
							normal: {
								formatter: '{b}',
								position: 'right',
								show: false
							},
							emphasis: {
								show: true
							}
						},
						itemStyle: {
							normal: {
								color: '#F06C00'
							}
						},
						data: [{
							name: '北京',
							value: randomValue()
						}, {
							name: '天津',
							value: randomValue()
						}, {
							name: '上海',
							value: randomValue()
						}, {
							name: '重庆',
							value: randomValue()
						}, {
							name: '河北',
							value: randomValue()
						}, {
							name: '河南',
							value: randomValue()
						}, {
							name: '云南',
							value: randomValue()
						}, {
							name: '辽宁',
							value: randomValue()
						}, {
							name: '黑龙江',
							value: randomValue()
						}, {
							name: '湖南',
							value: randomValue()
						}, {
							name: '安徽',
							value: randomValue()
						}, {
							name: '山东',
							value: randomValue()
						}, {
							name: '新疆',
							value: randomValue()
						}, {
							name: '江苏',
							value: randomValue()
						}, {
							name: '浙江',
							value: randomValue()
						}, {
							name: '江西',
							value: randomValue()
						}, {
							name: '湖北',
							value: randomValue()
						}, {
							name: '广西',
							value: randomValue()
						}, {
							name: '甘肃',
							value: randomValue()
						}, {
							name: '山西',
							value: randomValue()
						}, {
							name: '内蒙古',
							value: randomValue()
						}, {
							name: '陕西',
							value: randomValue()
						}, {
							name: '吉林',
							value: randomValue()
						}, {
							name: '福建',
							value: randomValue()
						}, {
							name: '贵州',
							value: randomValue()
						}, {
							name: '广东',
							value: randomValue()
						}, {
							name: '青海',
							value: randomValue()
						}, {
							name: '西藏',
							value: randomValue()
						}, {
							name: '四川',
							value: randomValue()
						}, {
							name: '宁夏',
							value: randomValue()
						}, {
							name: '海南',
							value: randomValue()
						}, {
							name: '台湾',
							value: randomValue()
						}, {
							name: '香港',
							value: randomValue()
						}, {
							name: '澳门',
							value: randomValue()
						}]
					}]
				};
				
				var chart = echarts.init(document.getElementById("container")); chart.setOption(option);
			}
			
			
			initchart();
		</script>
	</body>

</html>